<template>
  <transition name="content-sidebar-animation">
    <div v-show="isShow" class="sidebar-wrap">
      <ul class="router-select" @click="hideSidebar">
        <router-link to="/csgGoBox" tag="li" class="select-item">
          <div class="yellow-line"></div>
          <i class="icon iconfont icon-cs-go"></i>
          <p class="text">CS:GO盲盒</p>
        </router-link>
        <router-link to="/luckyOrnament" tag="li" class="select-item">
          <div class="yellow-line"></div>
          <i class="icon iconfont icon-wujiaoxingxingxing"></i>
          <p class="text">幸运饰品</p>
        </router-link>
        <router-link to="/gratisSkin" tag="li" class="select-item">
          <div class="yellow-line"></div>
          <i class="icon iconfont icon-lihe"></i>
          <p class="text">免费皮肤</p>
        </router-link>
        <router-link to="/dota2Box" tag="li" class="select-item">
          <div class="yellow-line"></div>
          <i class="icon iconfont icon-dota"></i>
          <p class="text">data2盲盒</p>
        </router-link>
      </ul>
      <div class="other-select"></div>
    </div>
  </transition>
</template>
<script type="text/ecmascript-6">
import { sidebarMixin } from 'assets/js/mixin'

export default {
  mixins: [sidebarMixin],
  props: {
    isShow: Boolean
  },
  data() {
    return {

    }
  }
}
</script>

<style lang="stylus" scoped ref="stylesheet/stylus">
.sidebar-wrap {
  display: flex;
  flex-direction: column;


  .router-select {
    .select-item {
      display: flex;
      align-items: center;
      height: 44px;
      color: #848492;

      .yellow-line {
        margin-right: 17px;
        height: 100%;
        width: 3px;
        transition: transform 300ms ease;
        transform: translateX(-100%);
      }

      .icon {
        font-size: 18px;
        margin-right: 10px;
      }

      .text {
        margin: 0;
        font-weight: 500;
      }

      &:hover {
        color: #E9B10E;
        box-shadow: 0 5px 3px 0 rgba(0, 0, 0, 0.16);
      }

      &.router-link-active {
        .text {
          color: #C3C3E2;
        }
      }

      &:hover, &.router-link-active {
        background-color: #444659;

        .yellow-line {
          transform: translateX(0);
          background-color: #E9B10E;
        }

        .icon {
          color: #E9B10E;
        }
      }
    }
  }
}

// 动画
.content-sidebar-animation-enter-active, .content-sidebar-animation-leave-active {
  transition: transform 0.2s ease-out;
}

.content-sidebar-animation-enter, .content-sidebar-animation-leave-to {
  transform: translateX(-100%);
}
</style>